<script setup>
import { getHomebannert, getHomeHot, getCategoryHead, getGuessLike } from '@/api/home'
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import { backTopProps } from 'vant';

const bannerList = ref([])
const hotList = ref([])
const List = ref([])
const router = useRouter()
const pro = ref([])

const iconName = ref("apps-o");
const classType = computed(() => {
    return iconName.value === "apps-o" ? "clo_2" : "clo_1";
});
// const list = [...Array(50).keys()]
function skip() {
    router.push('../kind')
}

getHomebannert().then((res) => {
    // console.log(res.data.result);
    bannerList.value = res.data.result
    // console.log(bannerList.value);
})

getHomeHot().then((res) => {
    hotList.value = res.data.result
})

getCategoryHead().then(res => {
    List.value = res.data.result
    // console.log(List.value);
})

const page = ref(1);
const loading = ref(false);
const finished = ref(false);

function onLoad() {
    loading.value = true
    getGuessLike({ page: page.value, pageSize: 10 }).then(res => {
        // pro.value = res.data.result
        // console.log(pro.value);
        if (res.data.result.items.length) {
            pro.value = [...pro.value, ...res.data.result.items]
            // console.log(pro.value);
            page.value++
            loading.value = false
        } else {
            finished.value = true
        }
    })
}

function toData(id) {
    // console.log(666);
    // console.log(id);
    router.push({
        path: '/detail',
        query: { id }
    })
}


</script>

<template>
    <div class="box">
        <header class="header">首页</header>

        <div class="content">
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerList" :key="item.id">
                    <van-image :src="item.imgUrl"></van-image>
                </van-swipe-item>
            </van-swipe>

            <!-- 宫格分类 -->
            <van-grid :column-num="4" :border="false">
                <van-grid-item v-for="value in hotList" :key="value.id" :icon="value.picture" :text="value.title" />
            </van-grid>
            <van-grid :column-num="3" :border="false">
                <van-grid-item @click="skip" v-for="value in List" :key="value.id" :icon="value.picture"
                    :text="value.name" />
            </van-grid>

                <!-- <van-cell v-for="item in list" :key="item" :title="item" /><van-back-top /> -->
                
                <!-- //回到顶部 -->
                <!-- <van-back-top immediate /> -->
                <van-cell />
                <van-back-top 
                    right="4vw" 
                    bottom="18vh" 
                    offset="600"
                />


            <!-- 商品列表 -->
            <div class="proList_box" :class="classType">
                <div class="itme" v-for="item in pro" :key="item.id" @click="toData(item.id)">
                    <div class="itemImage">
                        <van-image :src="item.picture"></van-image>
                    </div>
                    <div class="itemInfo">
                        <div class="itemInfoTile van-multi-ellipsis--l2">
                            {{ item.desc }}
                        </div>
                        <br>
                        <div class="itemInfoPrice">￥{{ item.price }} 元</div>
                    </div>
                </div>
                <div class="iconBox" @click="iconName = iconName === 'apps-o' ? 'bars' : 'apps-o'">
                    <van-icon :name="iconName" size="30" />
                </div>
            </div>
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="itme" v-for="item in pro" :key="item.id"></div>
            </van-list>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.clo_1 {
    padding: 10px;
    box-sizing: border-box;

    .itme {
        background-color: #ccc;
        display: flex;
        // border: 1px solid #f66;
        margin: 3px 0;

        .itemImage {
            width: 1rem;
            height: 1rem;

            .van-image {
                width: 100%;
                height: 100%;
            }
        }

        .itemInfo {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 0 10px;
            box-sizing: border-box;
            color: red;


            .itemInfoPrice {
                font-size: 20px;
                color: #e411cb;
            }
        }
    }
}

// .clo_2 上图下文
.clo_2 {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;

    .itme {
        background-color: #f4f4f4;
        width: 48%;
        height: 260px;
        // border: 1px solid #f66;
        box-sizing: border-box;
        margin: 5px 3px;

        .itemImage {
            width: 100%;
            height: 1.7rem;

            .van-image {
                width: 100%;
                height: 100%;
            }
        }

        .itemInfo {
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            color: rgb(0, 0, 0);

            .itemInfoPrice {
                font-size: 20px;
                color: #000000;
            }
        }
    }
}

.iconBox {
    position: fixed;
    bottom: 65px;
    right: 15px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>

